<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 用一个行列布局 -->
        <el-row
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <!-- 左边 -->
          <el-col :span="20">
            <svg-icon icon-class="home" /><span
              >江苏传智播客教育科技股份有限公司</span
            >
          </el-col>
          <!-- 右边 -->
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <!-- 两个内容 -->
              <el-col>负责人</el-col>
              <!-- 下拉菜单 element -->
              <el-col>
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <el-dropdown-menu slot="dropdown">
                  
                     <el-dropdown-item @click.native="showDialog = true">添加子部门</el-dropdown-item >
               
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 使用el-tree放主题的内容 -->
        <!-- :data="list" 双休绑定数据   :default-expand-all="true"  默认展开 -->
        <el-tree :data="list" :default-expand-all="true">
          <!-- 使用el-tree组件提供作用域插槽 获取组件中的数据 有node和  data   数据在data中-->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <!-- 左边 -->
              <el-col :span="20">
                <svg-icon icon-class="home" /><span>{{ data.name }}</span>
              </el-col>
              <!-- 右边 -->
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <!-- 下拉菜单 element -->
                  <el-col>
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="hAdd(data.id)"
                          >添加子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hEmit(data.id)"
                          >编辑子部门</el-dropdown-item
                        >
                        <el-dropdown-item @click.native="hDel(data.id)"
                          >删除子部门</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <!-- 添加子部门的弹层 -->
      <el-dialog
        :title="isEmit ? '编辑' : '新增'"
        :visible.sync="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <AddorEdit
          v-if="showDialog"
          :id="curId"
          @success="hSuccess"
          :isEmit="isEmit"
        ></AddorEdit>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getDepartments, delDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
import AddorEdit from "./deptDialog.vue";
export default {
  // 注册组件
  components: {
    AddorEdit,
  },
  data() {
    return {
      isEmit: false, //控制编辑/添加模式
      showDialog: false, //控制弹窗的隐藏和显示
      curId: "",
      // 依赖一份树形数据
      list: [], //保存tree的数据
    };
  },
  // 页面加载就渲染
  created() {
    // 渲染部门列表
    this.loadDepartments();
  },
  
  methods: {
    // 删除部门
     hDel(id) {
    this.$confirm("你确定要删除吗?").then(async() => {
        const res = await delDepartments(id);
        console.log("delDepartments", res);
        if(res.code!==10000) return this.$message.error(res.message)
        this.$message.success(res.message)
        // 删除完成 重新渲染页面
       this.loadDepartments();
      }).catch((error) => error);
  },
    // 关闭弹窗  重新渲染页面  (子传父  添加子部门弹层完毕后)
    hSuccess() {
      this.showDialog = false;
      this.loadDepartments();
    },
    // 用户点击了新增
    hAdd(id) {
      this.curId = id;
      this.isEmit = false;
      this.showDialog = true;
    },
    // 用户点击了编辑增
    hEmit(id) {
      this.curId = id;
      this.isEmit = true;
      this.showDialog = true;
    },

    // 获取企业的部门列表
    async loadDepartments() {
      try {
        const res = await getDepartments();
        console.log("getDepartments", res); //res.data.depts
        //  this.list=res.data.depts
        res.data.depts.shift(); //删除数组中第一条数据  取出公司的名字
        // 把树平铺据转换为树形数据   调用已经封装好的函数tranListToTreeData()
        this.list = tranListToTreeData(res.data.depts);
        // 保存数据
      } catch (err) {
        console.log("getDepartments", err);
      }
    },
  },
};
</script>